import React from 'react'
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    ActivityIndicator,
    Button,
    FlatList,
    Image,
    ImageBackground,
    Modal,
    Picker,
    TouchableOpacity,
    ActionButton
} from 'react-native';

let Styles = StyleSheet.create({
    listItem : {
        marginBottom : 25,
        padding : 10
    },
    chapt : {
        fontSize : 20,
        lineHeight:30
    },
    chapterNameBox : {
        marginBottom : 20,
        marginTop : 15
    },
    chapterName : {
        fontSize : 25,
        fontWeight : "bold",
        fontFamily:'Georgia'
    }
});
  
function BookScreen({ route, navigation }){
    const { path } = (route.params==null) ? "" : route.params;
    const { host, chapterName } = route.params;
    const [duan, setDuan] = React.useState([]);
    
    React.useEffect(() => {
        if(path != ""){
            fetch(host + path).then(res => {
                return res.text();
            }).then(res => {
                var dua = res.split("<br>");
                for(var i = 0; i < dua.length; i++){
                    dua[i] = dua[i].replace(/(^\s*)|(\s*$)/g,"");
                }
                setDuan(dua);
                // flat.scrollToOffset(0);
                // flat.scrollToIndex(0);
            });
        }
    });


    function _renderItem(data){
        return (
            <View style={Styles.listItem}>
                <View>
                    <Text style={Styles.chapt}>&emsp;&emsp;{data.item}</Text>
                </View>
            </View>
        )
    }

    return(
        <FlatList
        ListHeaderComponent={
            <View style={Styles.chapterNameBox}>
                <Text style={Styles.chapterName}>{chapterName}</Text>
            </View>
        }
        data={duan}
        renderItem={_renderItem}
        keyExtractor={(item,index)=> index + ""}
        
    />
    )
}


export default BookScreen;